<template>
    <div class="advertising">
        <div class="content">
            <div class="left_logo">
                <img class="logo" src="../../assets/images/goodsDetails/ico_guang.png" alt="">
                <div class="tip_text">
                    <h2 class="title">密马<span class="tip">APP</span></h2>
                    <p class="text">不发快递的玩意这全有！</p>
                </div>
            </div>
            <!-- @click="jumpApp" -->
            <div class="right_btn" @click="jumpApp" id="downloadButton">
                立即下载
            </div>
        </div>
    </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed: {
      ...mapState(['apps'])
    },

    created() {
        var data = OpenInstall.parseUrlParams();//openinstall.js中提供的工具函数，解析url中的所有查询参数
        new OpenInstall({
            /*appKey必选参数，openinstall平台为每个应用分配的ID*/
            appKey : "w1b695",
            /*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/
            //apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',
            /*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*/
            preferWakeup:true,
            /*自定义遮罩的html*/
            //mask:function(){
            //  return "<div id='openinstall_shadow' style='position:fixed;left:0;top:0;background:rgba(0,255,0,0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>"
            //},
            /*openinstall初始化完成的回调函数，可选*/
            onready : function() {
                var m = this, button = document.getElementById("downloadButton");
                // button.style.visibility = "visible";

                /*在app已安装的情况尝试拉起app*/
                m.schemeWakeup();
                /*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*/
                button.onclick = function() {
                    m.wakeupOrInstall();
                    return false;
                }
            }
        }, data);
    },
    methods: {

      // 判断是什么手机端  点开
      jumpApp() {
        // var u = navigator.userAgent;
        // var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        // var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // if (isAndroid) {
        // 	window.open(this.apps.android_url)
        // } else {
        // 	window.open(this.apps.ios_url)
        // }
        // this.$router.push({
        //   path: '/personal_page'
        // })
        
      }
    }
  };
</script>
<style lang="scss" scoped>
    // 详情广告bananer
    .advertising {
        max-width: 10rem;
        height: 55px;
        background: rgba(0, 0, 0, 0.75);
        // background: #0a0a0a;
        display: flex;
        justify-content: center;
        align-items: center;

        .content {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .left_logo {
                display: flex;
                align-items: center;

                .logo {
                    margin: 14px 0 13px 19px;
                    width: 36px;
                    height: 36px;
                    border-radius: 6px;
                    background-size: cover;
                }

                .tip_text {
                    color: rgba(255, 255, 255, 1);
                    font-weight: 400;
                    margin-left: 14px;

                    .title {
                        width: 60px;
                        height: 13px;
                        font-size: 14px;
                        font-weight: bold;
                    }

                    .text {
                        font-size: 10px;
                        margin-top: 9px;
                        letter-spacing: 1px;
                    }
                }
            }

            .right_btn {
                width: 78px;
                height: 28px;
                background: #ffdd07;
                border-radius: 18px;
                margin: 18px 15px;
                font-size: 12px;
                font-weight: 600;
                // line-height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #2f2f2f;
            }
        }
    }
</style>
